<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
  TIP
  mask-origin 属性指定遮罩图像的初始定位区域，类似于background-origin。
 -->

<style>
    .wrap {
        display: inline-block;
        border: 2px solid red;
    }

    .box {
        width: 200px;
        height: 100px;
        border: 20px solid blue;
        padding: 50px;
        background-color: khaki;
    }

    .mask {
        /* 添加兼容型前缀 */
        -webkit-mask-image: url("/src/img/css3/star.png");
        /* 图片为上图提供的纯黑色的五角星 */
        mask-image: url("/src/img/css3/star.png");
        mask-repeat: no-repeat; /* 遮罩图像重复度 */
        mask-position: 0 0; /* 遮罩层背景图居中 */
        /* 遮罩图层初始定位区域 ,
            决定了mask-position设置的坐标相对于那个区域定位
            */
        mask-origin: border-box;
    }
</style>

<!-- 
    mask-origin 属性值	说明	渲染效果
    border-box	默认值，遮罩图像初始定位区域为元素边框区域	image-20250525181729484
    padding-box	遮罩图像初始定位区域为元素内边距区域	image-20250525181916029
    content-box	遮罩图像初始定位区域为元素内容区	image-20250525181847964
-->

<div class="wrap">
    <div class="box mask"></div>
</div>
</body>
</html>